<template>
  <navbar></navbar>
  <view class="viewpoint">
    <!-- 顶部栏 -->

    <!-- 侧边栏 -->
    <view class="side">
      <scroll-view scroll-y>
        <view @tap="navi1" :class="currentPage == 'homepage' ? 'active' : ''" class="side_nav"
          >首页<text class="iconfont icon-shouye"></text
        ></view>
        <view @tap="navi2" :class="currentPage == 'statistics' ? 'active' : ''" class="side_nav"
          >统计<text class="iconfont icon-tongji"></text
        ></view>
        <view @tap="navi3" :class="currentPage == 'sign' ? 'active' : ''" class="side_nav"
          >签约<text class="iconfont icon-dianziqianyue"></text
        ></view>
        <view @tap="navi4" :class="currentPage == 'visit' ? 'active' : ''" class="side_nav"
          >随访<text class="iconfont icon-suifang"></text
        ></view>
        <view @tap="navi5" :class="currentPage == 'archive' ? 'active' : ''" class="side_nav"
          >档案<text class="iconfont icon-dangan"></text
        ></view>
        <view @tap="navi6" :class="currentPage == 'check' ? 'active' : ''" class="side_nav"
          >体检<text class="iconfont icon-rentijiance"></text
        ></view>
        <view @tap="navi7" :class="currentPage == 'setting' ? 'active' : ''" class="side_nav"
          >设置<text class="iconfont icon-shezhi"></text
        ></view>
      </scroll-view>
    </view>
    <view class="main">
      <!-- 在这里显示页面内容 -->
      <homepage v-if="currentPage === 'homepage'"></homepage>
      <statistics v-if="currentPage === 'statistics'"></statistics>
      <archive v-if="currentPage === 'archive'"></archive>
      <check v-if="currentPage === 'check'"></check>
      <setting v-if="currentPage === 'setting'"></setting>
      <sign @on-click="navi5" v-if="currentPage === 'sign'"></sign>
      <visit v-if="currentPage === 'visit'"></visit>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import homepage from './homepage/homepage.vue'
import statistics from './statistics/statistics.vue'
import archive from './archive/archive.vue'
import check from './check/check.vue'
import setting from './setting/setting.vue'
import sign from './sign/sign.vue'
import visit from './visit/visit.vue'
import navbar from '../../component/navbar.vue'
import { useMemberStore } from '@/stores/index.ts'
const MemberStore = useMemberStore()

let currentPage = ref('homepage')
const navi1 = () => {
  currentPage.value = 'homepage'
}
const navi2 = () => {
  currentPage.value = 'statistics'
}
const navi3 = () => {
  currentPage.value = 'sign'
}
const navi4 = () => {
  currentPage.value = 'visit'
}
const navi5 = () => {
  currentPage.value = 'archive'
}
const navi6 = () => {
  currentPage.value = 'check'
}
const navi7 = () => {
  currentPage.value = 'setting'
}

</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.active {
  background-color: #049edf;
}
.viewpoint {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 50rpx);
  .side {
    width: 100rpx;
    background-color: #06d9f5;
    background: #fff radial-gradient(#06dbf5, #02abf3);
    .side_nav {
      height: 50rpx;
      width: 100%;
      color: #fff;
      text-align: center;
      line-height: 50rpx;
      font-size: 14rpx;
      font-weight: bold;
    }
  }
  .main {
    flex: 1;
  }
  .iconfont {
    margin-left: 10rpx;
    text-align: center;
    line-height: 50rpx;
    font-size: 16rpx;
    font-weight: bold;
  }
}
</style>
